import { Style, Fill, Stroke, Text, Icon } from 'ol/style';
import { colorRgb } from '../util'
import locationImg from '@/assets/map/zb.png';
import { mapManager } from '../MapManager';
import Circle from 'ol/style/Circle';
import { Point, MultiPoint } from 'ol/geom'

const  BASE_Z = 500;

class BaseStyle {
static lineColor = "#127dff";
    static   drawBaseStyle() {
        return [new Style({
            stroke: new Stroke({//polygon的边线
                color: BaseStyle.lineColor,
                lineDash: [10, 10],//虚线
                width: 4
            }),
            fill: new Fill({//polygon的填充
                color: "rgba(18,125,255, 0.1)"
            }),
            zIndex: BASE_Z
        }),borderPointStyle1,borderPointStyle2]
    }

    /**
     * 获取基地点的样式
     * @param {import("../../../util/typedef").BaseInfo} baseInfo   基地信息
     * @returns 
     */
    static getMarkerStyle(baseInfo) {
        return function () {

            if (baseInfo == undefined) {
                baseInfo = {}
            }

            var zoom = mapManager.getMap().getView().getZoom();
            var name = baseInfo.name;
            name = name == null ? "" : name;
            var fontSize = 18;
            var scale = 1;


            if (zoom < 15) {
                fontSize = 14;
                scale = 0.7;
            }


            if (zoom < 14) {
                fontSize = 13;
                scale = 0.7;
            }

            if (zoom < 13) {
                fontSize = 12;
                scale = 0.6;
            }

            if (zoom < 12) {
                fontSize = 12;
                scale = 0.5;
            }

            if (zoom < 11) {
                fontSize = 10;
                scale = 0.3;
            }


            if (zoom < 10) {
                fontSize = 8;
                scale = 0.3;
            }

            if (zoom < 8) {
                fontSize = 0;
                scale = 0.3;
            }

            var style = new Style({
                text: new Text({
                    font: fontSize + 'px  sans-serif',
                    text: name,
                    fill: new Fill({//颜色
                        color: '#fff'
                    }),
                    offsetY: 5//偏移量
                }),
                image: new Icon(/** @type {olx.style.IconOptions} */({
                    anchor: [0.5, 46], //数组1 分数0-1范围 左=0,右=1 ,数组2 从上到下上=0,下=1 当前用的像素单位
                    anchorXUnits: 'fraction', //分数
                    anchorYUnits: 'pixels',//像素
                    scale: scale,
                    src: locationImg
                }))
            });
            return style;
        }
    }

    /**
     * 获取地块样式
     * @public
     * @param {import("../../../util/typedef").BaseInfo} base   基地信息
     */
    static getBorderStyleStyle(base) {

        return function (feature) {
            var lineDash = null;
            var lineDashed = feature.get('lineDashed'); //获取属性，是否为虚线
            if (lineDashed) {
                lineDash = [10, 10];
            }

            var strokeWidth = 4;
            var zoom = mapManager.getMap().getView().getZoom();
            if (zoom < 13) {
                strokeWidth = 2;
            }
            if (zoom < 12) {
                strokeWidth = 1;
            }

            if (zoom < 11.8) {
                strokeWidth = 0;
            }

            //设置样式
            var color = base.viewColor == "" || base.viewColor == null ? "#ffffff" : base.viewColor;
            var styles = [new Style({
                stroke: new Stroke({
                    color: color,
                    width: strokeWidth,
                    lineDash: lineDash
                }),
                fill: new Fill({
                    color: "rgba(" + colorRgb(color) + ", 0.1)"
                }),
                zIndex: 1
            })];

            if (lineDashed) {
                styles.push(borderPointStyle1);
                styles.push(borderPointStyle2);
            }


            return styles;
        }


    }

}

const borderPointStyle1 = new Style({
    image: new Circle({
        radius: 5,
        fill: new Fill({
            color: '#fff'
        })
    }),
    geometry: function (feature) {
        var type = feature.getGeometry().getType();
        var coordinates = feature.getGeometry().getCoordinates()
        if (type == 'Point') {
            return new MultiPoint([coordinates]);
        } else {
            return new MultiPoint(coordinates[0]);
        }
    }
});


const borderPointStyle2 = new Style({
    image: new Circle({
        radius: 5,
        fill: new Fill({
            color: 'yellow'
        })
    }),
    geometry: function (feature) {
        var type = feature.getGeometry().getType();
        var coordinates = feature.getGeometry().getCoordinates()
        if (type == 'Point') {
            return new Point(coordinates);
        } else {
            return new Point(coordinates[0][0]);
        }
    }
});

export default BaseStyle;